
import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { render } from 'react-dom';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom';
import {Tools, SearchBar, WingBlank, Button, List, Checkbox } from 'weaver-mobile';
import { SelectPage } from 'weaver-mobile-page';
import QueueAnim from 'rc-queue-anim';
import HomeStore from '../../stores/home';

const CheckboxItem = Checkbox.CheckboxItem;
const getLabel = Tools.getLabel;

@withRouter
@inject('homeStore')
@observer
class RemindType extends React.Component {
  static defaultProps = {
    prefixCls: 'msg-setting-home',
  }

  componentDidMount() {
    this.autoFocusInst.focus();
    document.title =getLabel("33251", "选择") + getLabel("388219", "提醒种类");
  }

  checkboxOnchange = (key) => {
    const { storeType } = this.props;
    let whichStore = storeType;
    const selectedKeys = toJS(whichStore.selectedKeys);
    const allItems = toJS(whichStore.options);
    if (key === "") {
      // 选择全部
      if (selectedKeys.length == allItems.length) {
        whichStore.updateSelectedKey([]);
      } else {
        whichStore.updateSelectedKey(toJS(whichStore.options).map(item => item.key));
      }
      return;
    }
    // 非全部，移除全选按钮
    const wholeKey = selectedKeys.indexOf("");
    if (wholeKey === 0) {
      selectedKeys.shift();
    }

    if (!selectedKeys.includes(key)) {
      whichStore.updateSelectedKey([...selectedKeys, key]);
    } else {
      const indexOf = selectedKeys.indexOf(key);
      selectedKeys.splice(indexOf, 1);
      whichStore.updateSelectedKey([...selectedKeys]);
    }
  }

  searchChange(value) {
    const { storeType } = this.props;
    let whichStore = storeType;
    whichStore.searchText = value;
  }

  render() {
    const { storeType, homeStore } = this.props;
    const { detailSetting } = homeStore;
    let whichStore = storeType;
    const selectedKeys = toJS(whichStore.selectedKeys);
    return (
      <div className={`${this.props.prefixCls}-modal`}>
        <div className={`${this.props.prefixCls}-modal-content`}>
          <SearchBar
            ref={ref => this.autoFocusInst = ref}
            maxLength={8}
            placeholder={getLabel("83869","请输入")+getLabel("388219", "提醒种类")+getLabel("33439", "名称")}
            onChange={this.searchChange.bind(this)}
            value={whichStore.searchText}
          />
          <List>
            {whichStore.viewOptions.map(item => (
              <CheckboxItem
                key={item.key}
                checked={selectedKeys.includes(item.key)}
                onChange={this.checkboxOnchange.bind(this, item.key)}
              >
                {item.showname}
              </CheckboxItem>
            ))}
          </List>
        </div>
        <Button type="primary" className=""
          onClick={() => {
            const type = whichStore.type;
            if (type === 'home') {
              const params = {
                moduleid: whichStore.selectedKeys.includes("") ? "" : whichStore.selectedKeys.join()
              }
              homeStore.getLoadUserMsgConfig(params);
            }
            if (type === 'sub') {
              detailSetting.list.subList = detailSetting.list.subList.map((item, index) => {
                if (whichStore.selectedKeys.includes(index) || whichStore.selectedKeys.length === 0) {
                  return {...item, hide: false}
                } else {
                  return {...item, hide: true}
                }
              })
            }
            this.props.history.goBack();
          }}
        >{getLabel("30986", "保存")}</Button>
      </div>
    )
  }
}

export default RemindType;
